import styles from "./index.module.scss"
import AvatarUrl from "@/assets/images/avatar-border/04ba43a4f6e70f397f2adb71495ee388b0be83e4.jpg"
import BorderUrl from "@/assets/images/avatar-border/025d07fa04d38236bc2258be2faf2867e2c48fe1.png"
import {useMemo} from "react";

/**
 * 展示头像的组件
 * @constructor
 */
export default function SuperAvatar(props: {
    wh?: number | "100%" ,
    avatarUrl?: string,
    borderUrl?: string
}) {

    const {
        wh = 168, // 84
        avatarUrl = AvatarUrl,
        borderUrl = BorderUrl
    } = props

    //     width: 96px; // 48
    //     height: 96px;
    // margin: -48px 0 0 -48px; // -24px

    // wh  pyFaceWh pyFaceMargin
    // 168 96  -48
    // 84 48 -24
    // 其中 wh 是已经知道的
    // 他们已知道他们三个数之间的关系，那么如何通过 wh 推到出 pyFaceWh 和 pyFaceMargin
    // 168/96 = 84 / 48 = 21 / 12 = 7 / 4
    // 84/48 = 21 / 12 = 7 / 4
    // 48 = 84 * (4 / 7)
    // 写出计算公式
    const pyFaceWh = useMemo(() => {
        // wh 和 width 和 margin 之间的关系
        // wh 可以是 string 类型
        if(wh == "100%"){
            // 父元素高度 的 4/7
            return (4 / 7) * 100 + "%"
        }
        return wh * (4 / 7)
    }, [wh])
    const pyFaceMargin = useMemo(() => {
        // wh 和 width 和 margin 之间的关系
        // wh 可以是 string 类型
        if(wh == "100%"){
            // 父元素高度 的 4/7
            // return - ((4 / 7) * 100) + "%"
            return - (((4 / 7) * 100) / 2) + "%"
        }
        return -pyFaceWh / 2
    }, [wh, pyFaceWh])
    return <div className={styles.superAvatar} style={{width: wh, height: wh}}>
        <img src={avatarUrl} alt="头像"
             className={styles.pyFace} style={{width: pyFaceWh, height: pyFaceWh, margin: pyFaceMargin}}/>
        {borderUrl && <img src={borderUrl} alt="边框" className={styles.payPendant}/>}
    </div>
}
